<template>
  <div>
    <i class="iconfont icon-fanhui fanhui" @click="goBack"></i>
    <div class="data-list-container">

      <div class="data-list-item">
        <div class="img-wrapper">
          <img :src="listItem.img"/>
        </div>
        <div class="data-title">{{listItem.title}}</div>
        <div class="desc-container">
          <div @click="goToLocation(listItem.desc)"><i class="iconfont icon-wxbdingwei"></i>{{listItem.desc}}</div>
          <div class="focus">关注</div>
        </div>
      </div>
    </div>
    <div class="organization-title">{{organizationTitle}}</div>
    <p class="text-content">
      {{orgText}}
    </p>
  </div>
</template>

<script>
  import {Card} from 'vux'
  import {getContentDetail, addLook} from "@/api/learn"

  export default {
    components: {
      Card
    },
    data() {
      return {
        lessonId: 0,
        listItem: {
          id: 1,
          img: require("../static/img/detail.png"),
          title: "阳光家教",
          desc: "广州大学华软软件学院",
        },
        organizationTitle: "机构简介",
        orgText: "中国的家教行业发展很快，但是发展的水平却不能说的上好。重要的一点是家教者的水平有限，而教育的目的大都是以金钱为目的，忽略了孩子的发展，把孩子培养成只会读书的书呆子，旧的知识教会了，碰到新的知识一样又不会。低年级知识学好了，等升学了，新知识还是学的困难。又得请家教教授知识。这样周而复始。只有教授学习方法的家教才是对孩子有益的家教。让学生学会学习的方法，这样才能更快更有效地吸收新知识。所谓磨刀不误砍柴工，而学习方法对于学习新知识来说就是磨刀石。只有刀够锋利才能省时省力砍好柴。  只有“授人以鱼不如授人以渔”的家教模式才能有效让孩子摆脱年年请家教的宿命"
      }
    },
    created() {
      this.lessonId = this.$route.query.id

    },
    methods: {
      goBack() {
        this.$router.go(-1)
      },
      goToLocation(where){
        this.$router.push(`/location?where=${where}`)
      }
    }
  }

</script>

<style>
  .data-list-container {
    position: relative;
    border-bottom: 10px solid rgb(245, 245, 245)
  }

  .icon-wxbdingwei {
    position: relative;
    margin-right: 4px;
  }

  .data-list-item {
    background: white;
    position: relative;
    margin-bottom: 10px;
  }

  .fanhui {
    position: absolute;
    top: 20px;
    left: 20px;
    color: white;
    z-index: 9999;
    font-size: 20px;
  }

  .organization-title {
    position: relative;
    text-align: center;
    font-weight: 16px;
    color: gray;
    padding: 10px;
    background: white;
  }

  .text-content {
    position: relative;
    font-size: 14px;
    padding: 10px;
    margin-bottom: 100px;
    background: white;
  }

  .data-list-item::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 10px solid #eee;
  }

  .data-list-item:last-child:after {
    border: none;
  }

  .desc-container {
    position: relative;
    padding: 0 10px 5px 17px;
  }

  .img-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
  }

  .img-wrapper img {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .data-title {
    position: relative;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px 0;
    padding-left: 19px;
  }

  .focus {
    position: absolute;
    padding: 0 10px;
    font-size: 14px;
    border-radius: 4px;
    right: 10px;
    top: 2px;
    text-align: center;
    color: #06cd56;
    border: 1px solid #06cd56;
  }
</style>
